<template>
  <div id="store">
    num = {{num}}
    <br/>
    index : id : 名称
    <br/>
    {{index}} : {{$store.state.orderModule.id}} -- {{$store.state.orderModule.name}} --
    <button @click="next()">next</button>
    <br/>
    {{index}} : {{orderId}} -- {{orderName}} --
    <button @click="next2()">next</button>
    <br/>
    {{index}} : {{orderId}} -- {{orderName}} --
    <button @click="nextAct()">next</button>
    <br/>
    {{index}} : {{orderId}} -- {{orderName}} --
    <button @click="nextAct2()">next</button>
    <br/>
    <p>{{he}} -- {{he2}}</p>
  </div>
</template>

<script>
  import Vuex from "vuex"
  import { mapGetters, mapMutations } from "vuex"
  import { mapActions } from "vuex"
  export default {
    name: "TestStore",
    data() {
      return {
        num: 10
      }
    },
    computed: {
      index() {
        return 0
      },
      ...Vuex.mapState({
        orderId:state => state.orderModule.id,
        orderName:state => state.orderModule.name
      }),
      ...mapGetters([
        "he"
      ]),
      ...mapGetters({
        he2: "he2"
      })
    },
    methods: {
      // Mutations
      next() {
        this.$store.commit("nextOrder")
      },
      // ...mapMutations([
      //   "nextOrder"
      // ]),
      ...mapMutations({
        next2: "nextOrder"
      }),

      // Actions
      nextAct() {
        this.$store.dispatch("next2ActOrder");
      },
      // ...mapActions([
      //   "nextActOrder"
      // ]),
      ...mapActions({
        nextAct2: "nextActOrder"
      })
    }
  }
</script>

<style scoped>

</style>
